<template>
	<view class='enrollment'>
		<view class="header">
			<u-navbar title="注册" :autoBack="true" bgColor="transparent" :fixed="false">
			</u-navbar>
		</view>
		<view class="content">
			<view class="form">
				<u--form labelPosition="left" :model="corporationsData" :rules="rules" ref="corporationsData"
					labelWidth="70" :labelStyle="{ fontSize: '28rpx' }">

					<u-form-item prop="name" label="姓名">
						<view style="background: #F3F5F6;border-radius: 12rpx;">
							<u--input placeholder="请输入姓名" border="surround" v-model="corporationsData.name"></u--input>
						</view>
					</u-form-item>

					<u-form-item prop="mobile" label="手机号">
						<view style="background: #F3F5F6;border-radius: 12rpx;">
							<u--input placeholder="请输入手机号" border="surround" v-model="corporationsData.mobile"
								:maxlength="11"></u--input>
						</view>
					</u-form-item>


					<u-form-item prop="code" label="验证码">
						<view style="background: #F3F5F6;border-radius: 12rpx;">
							<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
							<!-- #ifndef APP-NVUE -->
							<u-input placeholder="请输入验证码" v-model="corporationsData.code" maxlength="4">
								<!-- #endif -->
								<!-- #ifdef APP-NVUE -->
								<u--input placeholder="请输入验证码" v-model="corporationsData.code" maxlength="4">
									<!-- #endif -->
									<template slot="suffix">
										<u-code ref="uCode" @change="codeChange" seconds="20"
											changeText="重新获取(X)"></u-code>
										<u-button @tap="getCode" :text="tips" type="primary" size="mini"></u-button>
									</template>
									<!-- #ifndef APP-NVUE -->
							</u-input>
							<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							</u--input>
							<!-- #endif -->
						</view>
					</u-form-item>

					<u-form-item prop="password" label="设置密码">
						<view style="background: #F3F5F6;border-radius: 12rpx;">
							<u--input placeholder="请输入密码" border="surround"
								v-model="corporationsData.password" type="password"></u--input>
						</view>
					</u-form-item>

					<u-form-item prop="data5" label="确认密码">
						<view style="background: #F3F5F6;border-radius: 12rpx;">
							<u--input placeholder="请输入密码" border="surround" v-model="corporationsData.data5" type="password"></u--input>
						</view>
					</u-form-item>

					<u-form-item prop="refereeMobile" label="推荐人">
						<!-- <view style="padding-left: 140rpx;box-sizing: border-box;"> -->
							<view style="background: #F3F5F6;border-radius: 12rpx;box-sizing: border-box;">
								<u--input placeholder="请输入推荐人手机号" border="surround"
									v-model="corporationsData.refereeMobile"></u--input>
							</view>
						<!-- </view> -->
					</u-form-item>

					<u-form-item prop="data7" label="所在地区">
						<view style="background: #F3F5F6;border-radius: 12rpx;">
							<u--input placeholder="省、市、区、街道" suffixIcon="arrow-right" ref="data7"
								suffixIconStyle="color: #909399" v-model="corporationsData.data7"
								@focus="data7Focus"></u--input>
						</view>
					</u-form-item>

					<u-form-item prop="address" label="详细地址" style="flex-direction: column;">
						<view style="background: #F3F5F6;border-radius: 12rpx;">
							<u--textarea v-model="corporationsData.address" placeholder="小区、写字楼、门牌号等"></u--textarea>
						</view>
					</u-form-item>

				</u--form>
			</view>
			<u-picker :show="show" :columns="columns" keyName="name" @confirm="confirm" @change="changeHandler"
				:loading="loadingPicker" @cancel="cancel"></u-picker>
		</view>
		<view class="bottom-btn">
			<view class="btn">
				<view v-if="!loading" @click="submit">注册</view>
				<view v-else>提交中...</view>
			</view>
			<safe-bottom-x></safe-bottom-x>
		</view>
	</view>
</template>
<script>
export default {
	name: 'enrollment',
	data() {
		return {
			tips: '',
			value: '',
			loading: false,
			loadingPicker: false,
			show: false,
			columns: [[], [], []],
			columnData1: {},
			columnData2: {},
			corporationsData: {
				name: "",
				mobile: "",
				code: "",
				password: "",
				data5: "",
				refereeMobile: "",
				data7: "",
				address: "",
				provinceId: "",
				cityId: "",
				areaId: "",
				refereeId:"",//推荐人Id
			},
			rules: {
				'name': {
					type: 'string',
					required: true,
					message: '姓名不能为空',
					trigger: ['blur', 'change']
				},
				'mobile': {
					type: 'string',
					required: true,
					message: '手机号不能为空',
					trigger: ['blur', 'change']
				},
				'code': {
					type: 'string',
					required: true,
					message: '验证码不能为空',
					trigger: ['blur', 'change']
				},
				'password': {
					type: 'string',
					required: true,
					message: '密码不能为空',
					trigger: ['blur', 'change']
				},
				'data5': {
					type: 'string',
					required: true,
					message: '密码不能为空',
					trigger: ['blur', 'change']
				},
				// 'refereeMobile': {
				// 	type: 'string',
				// 	required: true,
				// 	message: '密码不能为空',
				// 	trigger: ['blur', 'change']
				// },
				'data7': {
					type: 'string',
					required: true,
					message: '地址不能为空',
					trigger: ['change']
				},
				'address': {
					type: 'string',
					required: true,
					message: '详细地址不能为空',
					trigger: ['blur', 'change']
				},
			},
		};
	},
	onLoad(ope) {
		if (ope.userId) {
			this.corporationsData.refereeId = ope.userId
		}

	},
	onShow() { },
	onHide() { },
	methods: {
		changeHandler(e) {
			console.log('e::: ', e);
			const {
				columnIndex,
				value,
			} = e
			// 当第一列值发生变化时，变化第二列(后一列)对应的选项
			this.regionList(this.columns, columnIndex + 1, { level: value[columnIndex].level + 1, parentId: value[columnIndex].id })
		},
		cancel() {
			this.show = false
		},
		// 回调参数为包含columnIndex、value、values
		confirm({ value }) {
			console.log('value::: ', value);
			let str = ""
			value.forEach((item, index) => {
				str += item.name
				if (index == 0) {
					this.$set(this.corporationsData, 'provinceId', item.id)
				} else if (index == 1) {
					this.$set(this.corporationsData, 'cityId', item.id)
				} else if (index == 2) {
					this.$set(this.corporationsData, 'areaId', item.id)
				}

			})
			this.corporationsData.data7 = str
			this.show = false
		},
		data7Focus() {
			this.show = true;
			this.regionList(this.columns, 0)
		},
		regionList(arr, key, data = { level: 1, parentId: 0 }) {
			const { parentId, level } = data
			if (level == 4) return
			this.$request.get("/customer/address/regionList", data,).then(res => {
				if (res.code == 0) {
					console.log(res);
					this.$set(arr, key, res.data)
					this.regionList(arr, key + 1, { level: level + 1, parentId: res.data[0].id })
				}
			})
		},
		submit() {
			// /customer/login/register
			this.$refs["corporationsData"].validate().then(res => {
				if (this.corporationsData.password !== this.corporationsData.data5) {
					uni.$u.toast('两次密码不一致');
					return
				}
				this.loading = true;
				this.$request.get("/customer/login/register", this.corporationsData,).then(res => {
					setTimeout(() => {
						this.loading = false;
					}, 2000);
					if (res.code == 0) {
						console.log(res.data);
						uni.setStorageSync("token", res.data.token)
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000);
						uni.$u.toast('注册成功');

					} else {
						uni.$u.toast(res.msg)
					}
				})
				// approve({ openId: this.openId, ...this.corporationsData, type: this.userState }).then((res) => {
				// 	if (res.code == 0) {
				// 		uni.$u.toast('提交成功')
				// 		this.getAccreditation()
				// 	} else {
				// 		uni.$u.toast('提交失败')
				// 	}
				// 	this.loading = false;
				// })
			}).catch(errors => {
				this.loading = false;
				uni.$u.toast('校验失败')
			})
		},
		codeChange(text) {
			this.tips = text;
		},
		getCode() {
			if (!this.corporationsData.mobile) {
				uni.$u.toast('电话不能为空');
				return
			}
			if (this.$refs.uCode.canGetCode) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				})
				this.$request.get("/customer/login/sendSms", { phone: this.corporationsData.mobile, type: 1 },).then(res => {
					uni.hideLoading();
					this.$refs.uCode.start();
					if (res.code == 0) {
						console.log(res);
						uni.$u.toast('获取成功');
					}
				})
			} else {
				uni.$u.toast('倒计时结束后再发送');
			}
		},
	},
	onPullDownRefresh() { },
	onReachBottom() { },
};
</script>
<style lang="scss">
.enrollment {
	display: flex;
	flex-direction: column;

	.header {
		// height: 208rpx;
		background: linear-gradient(360deg, rgba(212, 231, 250, 0) 0%, #D4E7FA 100%);
	}

	.content {
		flex: 1;
		padding: 32rpx;
		box-sizing: border-box;
		overflow: auto;


		.button {
			height: 24px;
			font-size: 28rpx;
		}

		.form {
			padding: 32rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			box-shadow: 0rpx 8rpx 20rpx 0rpx #F0F1F2;
			border-radius: 24rpx;


			::v-deep .u-textarea {
				background: #F3F5F6;
				border-radius: 12rpx;
			}
		}
	}

	.bottom-btn {
		background: #fff;

		.btn {
			padding: 24rpx 30rpx;
			box-sizing: border-box;

			view {
				height: 88rpx;
				background: #2590FA;
				border-radius: 100rpx 100rpx 100rpx 100rpx;
				display: grid;
				place-content: center;
				color: #fff;
			}
		}
	}
}
</style>